<template>
    <fieldset>
        <legend>登录页</legend>
        用户名:
        <input type="text" v-model="username">
        <br>
        密码:
        <input type="password" v-model="password" @keydown.enter="login">
        <button @click="login">登入</button>
    </fieldset>
</template>
<script setup>
import {ref} from "vue"
import * as api from "../../api/users"
import {useRouter} from "vue-router"
let username = ref("")
let password = ref("")
    //1.获取输入框里的用户名和密码

    // 2.发起请求,请求登入
let router = useRouter()


let login = async ()=>{
    let res= await api.loginApi(username.value,password.value)
    // 服务器会返回token,token是令牌,这个令牌需要保存到本地,后续请求的时候带上令牌,就能随意访问服务器数据
    
    // 1.localStorage,关掉页面,只要token还具备时效性,那么就能其他页面,不需要登录
    // 2.sessionStorage,用户关掉页面,token就被清除,不管它还生不生效,重新打开页面,重新登录
    
    if(res.data.state){
        // 将token存到本地
        sessionStorage.setItem('qf-token',res.data.token)
        // 页面要进行跳转
       router.push("/")
    }else {
        alert(res.data.msg)
    }
    
    console.log(res);
}
    // 3.判定请求成功和请求失败的情况
</script>